<template>
  <div id="buy03">
    <ul class="ul01">
      <!-- <li class="level0_box">
        <p>
          <i class="vip_level level0"></i>
          <span>免费版用户</span>
        </p>
        <p>免费版尝新体验</p>
        <img src="@/assets/meng/line_mf.png" />
        <p>高级模块详情功能受限</p>
        <p>永久免费</p>
      </li> -->
      <li class="level0_box experience">
        <!-- <p><img src="@/assets/meng/b4.png" />免费版用户</p> -->
        <p>
          <i class="vip_level level1"></i>
          <span>体验版</span>
        </p>
        <p>体验版尝新</p>
        <img src="@/assets/meng/line_ty.png" />
        <p>高级模块详情功能受限</p>
        <p>0元体验</p>
      </li>
      <!-- <li class="v_p">
        <p>
          <i class="vip_level level1"></i>
          <span>体验版</span>
        </p>
        <p>专注账号内容创作</p>
        <img src="@/assets/meng/line_jj.png" />
        <p>直播、达人功能受限</p>
        <p>
          ￥
          <span>88</span>/月
        </p>
        <template v-if="VipType==0">
          <button @click="$emit('return_back', '0', 3)">升级会员</button>
        </template>
        <template v-else-if="VipType == 3">
          <button @click="$emit('return_back', '0', 3)">续费会员</button>
        </template>
        <template v-else-if="VipType == 1 || VipType == 2 || VipType == 4">
          <p class="is_vip">{{vipText}}</p>
        </template>
      </li> -->
      <li class="level5_box">
        <div class="level5_content">
          <p class="vip_item">
            <i class="vip_level level3"></i>
            <span>SVIP</span>
          </p>
          <p class="slogan_item">账号运营涨粉，助力直播变现</p>
          <img class="img_line" src="@/assets/meng/line_svip.png" />
          <p class="price_item">￥<span>99</span>/月</p>
          <template v-if="VipType==0 || VipType==3 || VipType==4">
            <button @click="$emit('return_back', '0', 5)">升级会员</button>
          </template>
          <template v-else-if="VipType == 5">
            <button @click="$emit('return_back', '0', 5)">续费会员</button>
          </template>
          <template v-else-if="VipType == 1 || VipType == 2">
            <p class="is_vip">{{vipText}}</p>
          </template>
        </div>
        <div class="box_pedestal">
          <div class="bp1"></div>
          <div class="bp2"></div>
        </div>
        <span class="vip_v">个人版</span>
        <el-tooltip class="item" effect="dark" content="若进行升级操作，则抵扣您实际消费的金额" placement="top-start">
          <i class="vip_question"></i>
        </el-tooltip>
      </li>
      <li class="level4_box v_p">
        <!-- <p><img src="@/assets/meng/b5.png" />SVIP</p> -->
        <p>
          <i class="vip_level level2"></i>
          <span>VIP</span>
        </p>
        <p>全面提升直播、达人、带货能力</p>
        <img src="@/assets/meng/line_vip.png" />
        <p>达人部分功能受限</p>
        <p>
          ￥
          <span>488</span>/月
        </p>
        <!-- <button @click="$emit('return_back', '0', 4)" v-if="VipType==3 || VipType == 4">{{VipType==3?'升级会员':'续费会员'}}</button>
        <p class="is_vip" v-else>{{vipText}}</p>-->

        <template v-if="VipType==0 || VipType==3">
          <button @click="$emit('return_back', '0', 4)">升级会员</button>
          <!-- <p class="is_vip">{{vipText}}</p> -->
        </template>
        <template v-else-if="VipType == 4">
          <button @click="$emit('return_back', '0', 4)">续费会员</button>
        </template>
        <template v-else-if="VipType == 1 || VipType == 2 || VipType == 5">
          <p class="is_vip">{{vipText}}</p>
        </template>
        <span class="vip_v">企业版</span>
      </li>
      <li class="level1_box v_p">
        <!-- <p><img src="@/assets/meng/b5.png" />SVIP</p> -->
        <p>
          <i class="vip_level level3"></i>
          <span>SVIP</span>
        </p>
        <p>账号运营涨粉，助力直播变现</p>
        <img src="@/assets/meng/line_svip.png" />
        <p>尊享全部基础分析功能</p>
        <p>
          ￥
          <span>1299</span>/月
        </p>
        <!-- <button @click="$emit('return_back', '0', 1)">升级会员</button>
        <p class="is_vip">{{vipText}}</p>-->

        <template v-if="VipType==0 || VipType==3 || VipType==4 || VipType==5">
          <button @click="$emit('return_back', '0', 1)">升级会员</button>
          <!-- <p class="is_vip">{{vipText}}</p> -->
        </template>
        <template v-else-if="VipType == 1">
          <button @click="$emit('return_back', '0', 1)">续费会员</button>
        </template>
        <template v-else-if="VipType == 2">
          <p class="is_vip">{{vipText}}</p>
        </template>
        <span class="vip_v">企业版</span>
      </li>
      <li class="level2_box v_p">
        <!-- <p><img src="@/assets/meng/b6.png" />Plus</p> -->
        <p>
          <i class="vip_level level4"></i>
          <span>Plus</span>
        </p>
        <p>精准数据价值，智能分析匹配</p>
        <img src="@/assets/meng/line_plus.png" />
        <p>尊享所有功能+多账号管理</p>
        <p>
          ￥
          <span>3888</span>/月
        </p>
        <!-- <button @click="$emit('return_back', '0', 2)" class="upgrade">
          升级会员
        </button>
        <p class="is_vip">{{vipText}}</p>-->
        <button @click="$emit('return_back', '0', 2)">{{VipType == 2?'续费会员':'升级会员'}}</button>
        <span class="vip_v">企业版</span>
      </li>
    </ul>
    <div class="ul_list">
      <ul class="ul02 hidden_scorll">
        <template v-for="listItem,idx in vipList">
          <li :key="idx+'123'">
            <template v-for="item in listItem">
              <p class="p1">{{ item.moduleName }}</p>
              <p class="p2" v-for="item_son in item.subList">
                <span>{{ item_son.moduleName }}</span>
                <span
                  class="font_style"
                  v-if="
                    item_son.permission != 'true' && item_son.permission != 'false'
                  "
                >{{ item_son.permission }}</span>
                <img
                  src="@/assets/meng/vip_fn_h.png"
                  v-if="item_son.permission == 'true'"
                  class="img01"
                />
                <img
                  src="@/assets/meng/vip_fn_d.png"
                  v-if="item_son.permission == 'false'"
                  class="img02"
                />
              </p>
              <div class="p3"></div>
            </template>
            <!-- <p class="wait">敬请期待...</p> -->
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'buy03',
  components: {},
  data() {
    return {
      cancel01: null,
      response01: [],
      vipList: [],
      VipType: this.$store.state.is_vip //当前用户vip等级,
    };
  },
  computed: {
    vipText() {
      let text = '';
      if (this.VipType == 1) {
        text = '您已经是SVIP-企业版';
      } else if (this.VipType == 2) {
        text = '您已经是Plus-企业版';
      } else if (this.VipType == 3) {
        text = '您已经是体验版会员';
      } else if (this.VipType == 4) {
        text = '您已经是VIP-企业版';
      }else if(this.VipType == 5){
        text = '您已经是SVIP-个人版';
      }
      return text;
    }
  },
  created() {
    this.get_data();
  },
  mounted() {},
  methods: {
    get_data() {
      let that = this;
      this.$axios
        .post(
          '/api/module/getmodule',
          {},
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            })
          }
        )
        .then(response => {
          if (response.data.code == 0) {
            this.response01 = response.data.data;

            if (response.data && response.data.data) {
              let dataObj = response.data.data;

              // 必须按照展示顺序push
              // this.vipList.push(dataObj.listfree); //免费
              this.vipList.push(dataObj.listHalloween); //体验版 体验版
              this.vipList.push(dataObj.listsvipPersonal); //svip
              this.vipList.push(dataObj.listvip); //vip
              this.vipList.push(dataObj.listsvip); //svip
              this.vipList.push(dataObj.listplusvip); //Plus
            }
            //添加权限对象
            let vipLevel = response.data.data.vipLevel;
            let roots = response.data.data;
            let rootObj = [];
            if (vipLevel == 1) {
              rootObj = roots['listsvip'];
            } else if (vipLevel == 2) {
              rootObj = roots['listplusvip'];
            } else if (vipLevel == 3) {
              rootObj = roots['listHalloween'];
            } else if (vipLevel == 4) {
              rootObj = roots['listvip'];
            } else {
              rootObj = roots['listfree'];
            }
            let initRootObj = {};

            for (let i = 0; i < rootObj.length; i++) {
              let parentLevel = rootObj[i];
              initRootObj[parentLevel.id] = {
                owner: parentLevel.owner
              };
              for (let j = 0; j < rootObj[i].subList.length; j++) {
                let childLevel = rootObj[i].subList[j];
                let idKey = childLevel.id;
                initRootObj[parentLevel.id][idKey] = childLevel.owner;
              }
            }
            this.$store.commit('userRoot', initRootObj);
            this.$store.commit('userRootData', roots);
          }
        });
      // let dataObj = this.response01;
      // this.vipList.push(dataObj.listfree); //免费
      // this.vipList.push(dataObj.listHalloween); //体验版
      // this.vipList.push(dataObj.listvip); //vip
      // this.vipList.push(dataObj.listsvip); //svip
      // this.vipList.push(dataObj.listplusvip); //Plus
    }
  }
};
</script>
<style scoped lang='less'>
.ul_list {
  height: 56vh;
  width: 100%;
}
.ul02 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  position: relative;
  // background-color: #fafafa;
  background-color: #fff;
  // padding: 20px 0 0;
  overflow: auto;
  li:last-child {
    margin-right: 0;
  }
  .wait {
    position: absolute;
    top: 180px;
    right: 166px;
    font-size: 14px;
    text-align: center;
    color: #c88d5a;
  }
  li {
    // background-color: #fafafa;
    display: inline-block;
    min-height: 100%;
    padding: 20px 30px 0;
    box-sizing: border-box;
    // width: 325px;
    width: 20%;
    //  min-height: 2412px;
    border-radius: 4px;
    margin-right: 10px;
    border-top: none;
    border: 1px solid #efefef;
    border-top: none;
    font-family: PingFangSC-Regular;
    .p1 {
      font-size: 14px;
      color: #222222;
      margin-bottom: 18px;
    }
    .p2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #555;
      margin-bottom: 18px;
      .font_style {
        font-size: 14px;
        // color: #555;
        color: #fd7f2c;
      }
      .img01 {
        width: 14px;
        height: 14px;
      }
      .img02 {
        width: 14px;
        height: 14px;
      }
    }
    .p3 {
      margin: 30px 0;
      height: 1px;
      background-color: #e5e5e5;
    }
  }
}
.ul01 {
  display: flex;
  width: 100%;
  // margin-top: 45px;
  li {
    position: relative;
    width: 20%;
    margin-right: 10px;
    box-sizing: border-box;
    // height: 254px;
    background-blend-mode: normal, normal;
    border-radius: 4px;
    text-align: center;
    padding: 22px 0;
    overflow: hidden;
    .vip_v{
      position: absolute;
      right: 0;
      top: 0;
      display: inline-block;
      line-height: 26px;
      padding: 0 12px;
      // background-color: #fbad65;
	    border-radius: 0px 0 0px 14px;
      font-size: 14px;
      color: #fff;
    }
    .vip_question{
      position: absolute;
      display: inline-block;
      width: 14px;
      height: 14px;
      top: 4px;
      left: 0;
      padding: 0 8px 8px;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url('./../../../assets/img/question_w.png');
      background-size: 14px 14px;
      cursor: pointer;
    }
    .vip_level {
      display: inline-block;
      width: 22px;
      height: 17px;
      margin-right: 10px;
      vertical-align: middle;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center center;
      &.level0 {
        background-image: url('./../../../assets/meng/b4.png');
      }
      &.level1 {
        background-image: url('./../../../assets/meng/vipl1.png');
      }
      &.level2 {
        background-image: url('./../../../assets/meng/vipl2.png');
      }
      &.level3 {
        background-image: url('./../../../assets/meng/b5.png');
      }
      &.level4 {
        background-image: url('./../../../assets/meng/b6.png');
      }
    }
    > p:nth-child(1) {
      font-size: 0;
      span {
        display: inline-block;
        font-size: 18px;
        vertical-align: middle;
      }
    }
    > p:nth-child(2) {
      margin-top: 14px;
      font-size: 14px;
    }
    > img:nth-child(3) {
      display: block;
      // width: 268px;
      height: 1px;
      margin: 8px auto;
    }
    > p:nth-child(4) {
      font-size: 14px;
    }
    &.level0_box {
      background-image: linear-gradient(-39deg, #f2f1f1 0%, #fcfbfb 100%),
        linear-gradient(#cdcfd5, #cdcfd5);
      color: #686a6e;
      > p:nth-child(4) {
        color: #888888;
      }
      > p:nth-child(5) {
        margin-top: 48px;
        font-size: 26px;
        line-height: 30px;
      }
    }
    &.experience{
      background-image: linear-gradient(-39deg, #ffe3a6 1%,#fff4e4 100%), 
	    linear-gradient(#fafafa, #fafafa);
      color: #936c33;
      > p:nth-child(4) {
        color: #936c33;
      }
    }
    &.v_p {
      > p:nth-child(4) {
        font-size: 14px;
      }
      > p:nth-child(5) {
        margin-top: 10px;
        font-size: 14px;
        span {
          font-size: 36px;
        }
      }
      > button {
        width: 127px;
        margin-top: 8px;
        line-height: 40px;
        font-size: 15px;
        border-radius: 20px;
        text-align: center;
        color: #ffffff;
      }
      .is_vip {
        font-size: 15px;
        margin-top: 17px;
      }
    }
    &.level3_box {
      background-image: linear-gradient(-39deg, #ffe3a6 0%, #fff4e4 100%),linear-gradient(#be9b50, #be9b50);
      color: #936c33;
      > button {
        background-color: #c9af76;
        &:hover {
          background-color: #d3b982;
        }
      }
      .vip_v{
        background-color: #ddb66d;
      }
    }
    &.level4_box {
      background-image: linear-gradient(-39deg, #fedac5 1%, #fff5ef 100%),
        linear-gradient(-39deg, #ffc7a8 0%, #ffefe4 100%),
        linear-gradient(-39deg, #eebcad 0%, #fdeee9 100%), linear-gradient(#c06d61, #c06d61);
      color: #a67458;
      > button{
        background-color: #ca977b;
        &:hover {
          background-color: #d7a386;
        }
      }
      .vip_v{
        background-color: #a67458;
      }
    }
    &.level1_box {
      background-image: linear-gradient(-39deg, #c4cbe0 0%, #f8f9ff 100%),
        linear-gradient(#145bf3, #145bf3);
      color: #737e9e;
      > button {
        background-color: #737e9e;
        &:hover {
          background-color: #a3afd3;
        }
      }
      .vip_v{
        background-color: #9ba6c7;
      }
    }
    &.level2_box {
      background-image: linear-gradient(-39deg, #fdcda5 1%, #feeee0 100%),
        linear-gradient(#145bf3, #145bf3);
      color: #ba8150;
      text-align: center;
      > button {
        background-color: #d99b65;
        &:hover {
          background-color: #e9a972;
        }
      }
      .vip_v{
        background-color: #d99c66;
      }
    }
    &:last-child {
      margin-right: 0;
    }
    button{
      padding: 0;
    }
    &.level5_box{
      padding: 40px 18px 0;
      background-color: #3c3c3c;
      color: #92551d;
      .level5_content{
        position: relative;
        width: 100%;
        height: 209px;
        padding-top: 16px;
        box-sizing: border-box;
        box-shadow: inset 0 -20px 10px rgba(0,0,0,.1);
        background-image: linear-gradient(-30deg, 
          #f89033 0%, 
          #fcb06a 50%, 
          #ffcfa0 100%), 
        linear-gradient(
          #e0b980, 
          #e0b980);
        background-blend-mode: normal, 
          normal;
        border-radius: 16px 16px 0px 0px;
        z-index: 2;
        font-size: 0;
        transform: translateY(-252px);
        animation: boxAni linear 400ms forwards;
        @keyframes boxAni {
          0%{
            transform: translateY(-252px);
          }
          75%{
            transform: translateY(10px);
          }
          90%{
            transform: translateY(-10px);
          }
          100%{
            transform: translateY(0px);
          }
        }
      }
      .vip_v{
        background-color: #fbad65;
        color: #92551d;
      }
      .is_vip {
        font-size: 15px;
        margin-top: 17px;
      }
      .vip_item{
        span{
          display: inline-block;
          font-size: 18px;
          color: #92551d;
          vertical-align: middle;
          
        }
      }
      .slogan_item{
        font-size: 14px;
        margin-top: 10px;
        color: #92551d;
      }
      .img_line{
        display: block;
        height: 1px;
        margin: 8px auto 6px;
        width: 100%;
      }
      button{
        width: 127px;
        margin-top: 9px;
        line-height: 40px;
        font-size: 15px;
        border-radius: 20px;
        text-align: center;
        color: #92551d;
        background-image: linear-gradient(0deg, 
          #ffdfc2 0%, 
          #fff9f4 100%), 
        linear-gradient(
          #a36226, 
          #a36226);
        background-blend-mode: normal, 
          normal;
        box-shadow: 0px 0px 10px 0px 
          rgba(210, 121, 41, 0.5);
        &:hover{
          background-image: linear-gradient(0deg, 
            #ffe9da 0%, 
            #ffffff 100%), 
          linear-gradient(
            #a36226, 
            #a36226);
        }
      }
      .price_item{
        font-size: 14px;
        color: #92551d;
        span{
          font-size: 36px;
        }
      }
      .box_pedestal{
        position: absolute;
        width: 100%;
        height: 22px;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
        .bp1{
          position: relative;
          height: 100%;
          width: 96%;
          margin: 0 auto;
          background-color: #e7e7e7;
          border-radius: 5px;
          z-index: 1;
        }
        .bp2{
          position: absolute;
          left: 0;
          bottom: 0;
          border-bottom: 12px solid #e7e7e7;
          border-left: 14px solid transparent;
          border-right: 14px solid transparent; 
          height: 0; 
          width: 100%;
          box-sizing: border-box;
          transform: scaleX(1.05);
          z-index: 3;
        }
      }
    }
    .upgrade {
      width: 127px;
      height: 44px;
      background-color: #c88d5a;
      border-radius: 4px;
      font-size: 17px;
      margin-top: 6px;
      text-align: center;
      color: #ffffff;
    }
  }
}
#buy03 {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  // background-color: #fff;
  padding: 16px;
  padding-bottom: 0;
  // border-radius: 4px;
}
</style>